<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="订单详情" navbarType='0' fontColor="#FFFFFF" :bgColor="themeColor" leftIconColor="#FFFFFF"></wlk-navbar>
        <block v-if="!loading">
            <view class="detail-bc" :style="{background:' linear-gradient(to bottom,'+themeColor+' ,'+ color+')'}">
                <view class="d-status bgw br08 pd30">
                    <view class="wlkflex justify-between status-info">
                        <view class="status-text bold">{{order.status_text}}</view>
                        <view class="wlkflex time-info justify-between" v-if="order.status=='0' && order.expiretime>0">
                            <view class="title mr05">支付剩余</view>
                            <u-count-down
                                    :time="order.counttime"
                                    format="HH:mm:ss"
                                    autoStart
                                    millisecond
                                    @change="onChange"
                            >
                                <view class="time">
                                    <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时</text>
                                    <text class="time__item">{{ timeData.minutes }}分</text>
                                    <text class="time__item">{{ timeData.seconds }}秒</text>
                                </view>
                            </u-count-down>
                        </view>
                    </view>
                    <view class="desc mt20"  v-if="order.status=='0'">
                        请您尽快支付，超时会自动取消且需要重新下单哦
                    </view>
                    <u-divider></u-divider>
                    <view class="wlkflex justify-between">
                        <view class="price-info wlkflex">
                            <text class="price-text">总价：</text>
                            <text class="price">¥{{order.total_fee}}</text>
                        </view>
                        <view class="wlkflex price-more" @click="showItem=true">
                            <view class="mr05">价格明细</view>
                            <u-icon name="arrow-right" color="#999" size="15"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
            <view class="bgw pd30 br08 order-info">
                <view class="head-title bold">产品信息</view>
                <navigator class="line-info wlkflex justify-between mt30" :url="'/pages/line/detail?id=' + order.line_id">
                    <view class="title u-line-2 bold">{{order.line_info?order.line_info.title:''}}</view>
                    <u-icon name="arrow-right" color="#999" size="15"></u-icon>
                </navigator>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">下单时间</view>
                    <view>{{$u.timeFormat(order.createtime,'yyyy-mm-dd hh:MM:ss')}}</view>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">选择套餐</view>
                    <view>{{order.suit_name}}</view>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">出发日期</view>
                    <view>{{order.date}}</view>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">出游人数</view>
                    <view>
                        <text v-if="order.adult_num>0">{{order.adult_num}}成人</text>
                        <text v-if="order.elder_num>0">{{order.elder_num}}老人</text>
                        <text v-if="order.child_num>0">{{order.child_num}}儿童</text>
                    </view>
                </view>
                <view  class="wlkflex other-info mt30" v-if="!$u.test.isEmpty(order.site_json)">
                    <view class="other-title mr10">上车地点</view>
                    <view>{{order.site_json.name}}</view>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">订单编号</view>
                    <view>{{order.order_sn}}</view>
                    <view class="ml20 copy-btn" @click="copyOrderSn(order.order_sn)">
                        复制
                    </view>
                </view>
            </view>
            <view class="bgw pd30 br08 order-info">
                <view class="head-title bold">联系人</view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">姓名</view>
                    <view>{{order.realname}}</view>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">手机号</view>
                    <view>{{order.mobile}}</view>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">订单备注</view>
                    <u--textarea disabled :customStyle="{backgroundColor:'#F9F9F9'}" border="none" v-model="order.remark" ></u--textarea>
                </view>
            </view>
            <view class="bgw pd30 br08 order-info">
                <view class="head-title bold">出游人信息</view>
                <view v-for="(item,index) in order.passengers" class="mt30">
                    <u-divider v-if="index>0"></u-divider>
                    <view class="other-desc bold">出游人{{index+1}}</view>
                    <view class="wlkflex other-info mt30">
                        <view class="other-title mr10">姓名</view>
                        <view>{{item.realname}}</view>
                    </view>
                    <view class="wlkflex other-info mt30">
                        <view class="other-title mr10">手机号</view>
                        <view>{{item.mobile}}</view>
                    </view>
                    <view class="wlkflex other-info mt30">
                        <view class="other-title u-line-1 mr10">{{idTypes[item.idtype]}}</view>
                        <view>{{item.idcard}}</view>
                    </view>
                </view>
            </view>
            <view class="bgw pd30 br08 order-info" v-if="!$u.test.isEmpty(order.bx_info)">
                <view class="head-title bold">必消信息</view>
                <view v-for="(bx,n) in order.bx_info" class="mt30">
                    <u-divider v-if="n>0"></u-divider>
                    <view class="wlkflex other-info mt30">
                        <view class="other-title mr10">必消{{n+1}}</view>
                        <view>{{bx.name}}</view>
                    </view>
                </view>
            </view>
            <view class="bgw pd30 br08 order-info" v-if="!$u.test.isEmpty(order.project_orders)">
                <view class="head-title bold">保险信息</view>
                <view v-for="(item,index) in order.project_orders" class="mt30">
                    <u-divider v-if="index>0"></u-divider>
                    <view class="other-desc bold">{{item.project_info.name}}</view>
                    <view class="wlkflex justify-between">
                        <view class="wd100">
                            <view class="wlkflex other-info mt30">
                                <view class="other-wd-title mr10">订单编号</view>
                                <view>{{item.order_sn}}</view>
                                <view class="ml20 copy-btn" @click="copyOrderSn(item.order_sn)">
                                    复制
                                </view>
                            </view>
                            <view v-for="(passenger,k) in order.passengers"  class="wlkflex other-info mt30">
                                <view class="other-wd-title mr10">投保人{{k+1}}</view>
                                <text class="mr10">{{passenger.realname}}</text>
                            </view>
                        </view>
                        <navigator :url="'/pages/order/project_detail?id=' + item.id">
                            <u-icon name="arrow-right" color="#999" size="15"></u-icon>
                        </navigator>
                    </view>
                </view>
            </view>
            <view class="wlk-fixed-btn wlkflex justify-end">
                <view class="btn-item" @click="showRefund" v-if="order.status>='1' && order.status<'3'">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" :type="order.refund_id>0?'warning':'info'" plain shape="circle"  :text="order.refund_id>0?'退款中':'申请退款'"></u-button>
                </view>
                <view class="btn-item" v-if="order.status=='-2'">
                    <u-button :customStyle="{
			                margin:'0',
			                width:'100%',
			                fontSize:'14rpx',
			                height:'70rpx'
                         }" type="info" plain shape="circle"  text="交易关闭"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='-1'">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" type="info" plain shape="circle"  text="已取消"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='3'">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" type="info" plain shape="circle"  text="已完成"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='0'" @click="cancelModel=true">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" type="info" plain shape="circle"  text="取消订单"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='0'" @tap.stop="$Router.push('/pages/pay/pay?type=line&id='+order.id)">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" :color="themeColor" plain shape="circle" text="立即支付"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='1'" @click="finishModel=true">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" :color="themeColor" plain shape="circle"  text="确认完成"></u-button>

                </view>
            </view>
        </block>

        <u-popup safeAreaInsetBottom  :show="showItem" closeable @close="showItem=false" round="20">
            <view class="order-item">
                <view class="pd30">
                    <view class="center title">价格明细</view>
                    <view class="item-info">
                        <view class="info-flex wlkflex justify-between mt40">
                            <view class="info-head">基本团费</view>
                            <view class="info-price">￥{{order.base_price}}</view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="order.adult_num>0">
                            <view class="info-desc col9">成人</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{order.price}}
                                </text>
                                <text class="ml05">
                                    x{{order.adult_num}}人
                                </text>
                            </view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="order.elder_num>0">
                            <view class="info-desc col9">老人</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{order.elder_price}}
                                </text>
                                <text class="ml05">
                                    x{{order.elder_num}}人
                                </text>
                            </view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="order.child_num>0">
                            <view class="info-desc col9">儿童</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{order.child_price}}
                                </text>
                                <text class="ml05">
                                    x{{order.child_num}}人
                                </text>
                            </view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="order.room_num>0">
                            <view class="info-desc col9">单房差</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{order.room_price}}
                                </text>
                                <text class="ml05">
                                    x{{order.room_num}}份
                                </text>
                            </view>
                        </view>
                        <block  v-if="order.project_fee>0">
                            <view class="info-flex wlkflex justify-between mt30">
                                <view class="info-head">保险费用</view>
                                <view class="info-price">￥{{order.project_fee}}</view>
                            </view>
                            <view class="info-flex wlkflex justify-between mt10" v-for="(item,index) in order.insurances">
                                <view class="info-desc col9">{{item.name}}</view>
                                <view class="info-desc-price col9">
                                    <text>
                                        ￥{{item.price}}
                                    </text>
                                    <text class="ml05">
                                        x{{order.adult_num+order.elder_num+order.child_num}}份x{{order.line_info.lineday}}天
                                    </text>
                                </view>
                            </view>
                        </block>
                        <block v-if="!$u.test.isEmpty(order.bx_info)">
                            <view class="info-flex wlkflex justify-between mt30">
                                <view class="info-head">必消项目</view>
                                <view class="info-price">￥{{order.bx_fee}}</view>
                            </view>
                            <view class="info-flex wlkflex justify-between mt10" v-for="(item,index) in order.bx_info">
                                <view class="info-desc col9">{{item.name}}</view>
                                <view class="info-desc-price col9">
                                    <text>
                                        ￥{{item.price}}
                                    </text>
                                    <text class="ml05">
                                        x{{order.adult_num+order.elder_num+order.child_num}}人
                                    </text>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </u-popup>
        <u-popup safeAreaInsetBottom  :show="refundModel" closeable @close="refundModel=false" round="20">
            <view class="refund-item relative wd100">
                <view class="pd30">
                    <view class="center title">确认退款信息</view>
                    <view class="mt30 item-info">
                        <u--form
                                labelPosition="left"
                                :model="refundItem"
                                ref="uForm"
                                labelWidth="100"
                                :labelStyle="{fontSize:'28rpx'}"
                        >
                            <u-form-item
                                    label="退款金额"
                                    ref="item1"
                            >
                                <u--input
                                        prefixIcon="rmb"
                                        v-model="refundItem.refund_fee"
                                        border="none"
                                        color="#FF5904"
                                        fontSize="14"
                                        :prefixIconStyle="{color:'#FF5904'}"
                                ></u--input>
                            </u-form-item>
                            <u-form-item
                                    label="申请备注"
                                    ref="item1"
                            >
                                <u--textarea :customStyle="{backgroundColor:'#F9F9F9'}" border="none" v-model="refundItem.remark" ></u--textarea>
                            </u-form-item>
                        </u--form>
                        <view class="wlk-fixed-btn">
                            <u-button :customStyle="{
			                        borderRadius:'8px',
			                        margin:'0 auto',
			                        width:'92%'
                                }" :color="themeColor" size="large" @click="submitModel=true" text="提交申请"></u-button>
                        </view>

                    </view>
                </view>
            </view>
        </u-popup>
        <u-modal :show="finishModel" title="提示" showCancelButton @confirm="finish" @cancel="finishModel=false" :confirmColor="themeColor" content="是否确认订单已完成？"></u-modal>
        <u-modal :show="cancelModel" title="提示" showCancelButton @confirm="cancel" @cancel="cancelModel=false" :confirmColor="themeColor" content="是否确认取消订单？"></u-modal>
        <u-modal :show="submitModel" title="提示" showCancelButton @confirm="submit" @cancel="submitModel=false" :confirmColor="themeColor" content="是否确认提交退款申请？"></u-modal>
    </view>
</template>
<script>
    import {rgbaToRgb,copy,toUrl} from '@/wlkutils/tools';
    import {mapMutations, mapGetters} from 'vuex';
    var _self;
    export default {
        computed: {
            ...mapGetters(['themeColor'])
        },
        onLoad() {
            _self = this;
            let id = this.$Route.query.id;
            _self.id = id
        },
        data() {
            return {
                idTypes:['身份证','护照','台胞证','港澳通行证','港澳居民居住证','军官证','回乡证'],
                timeData: {},
                id: '',
                showItem:false,
                refundModel:false,
                finishModel:false,
                cancelModel:false,
                submitModel:false,
                order: [],
                refund_order: [],
                refundItem:{
                    remark: '',
                    refund_fee: '',
                },
                color: '',
                loading:true,
            }
        },
        onShow() {
            this.color = uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.01);
            this.getData();
        },
        watch: {
            themeColor(val) {
                _self.color = uni.$u.colorToRgba(rgbaToRgb(val), 0.01);
            }
        },
        methods: {
            onChange(e) {
                this.timeData = e;
            },
            async getData() {
                this.loading = true;
                uni.$u.http.post('order/getDetail', {
                    id: _self.id
                }).then(res => {
                    _self.order = res.data.order;
                    _self.refund_order = res.data.refund_order;
                    _self.loading = false;
                }).catch(res => {
                })
            },
            copyOrderSn(v){
                copy(v);
            },
            cancel(){
                uni.$u.http.post('order/cancel', {
                    id: _self.id,
                    type:'line'
                }).then(res => {
                    _self.cancelModel = false;
                    _self.getData();
                }).catch(res => {
                })
            },
            finish(){
                uni.$u.http.post('order/finish', {
                    id: _self.id,
                    type:'line'
                }).then(res => {
                    _self.finishModel = false;
                    _self.getData();
                }).catch(res => {
                })
            },
            showRefund(){
                if(this.order.refund_id>0){
                    toUrl('/pages/order/refund?id='+this.order.refund_id);
                }else{
                    this.refundItem.refund_fee = this.order.total_fee;
                    this.refundModel=true;
                }

            },
            submit(){
                if(this.refundItem.refund_fee>this.order.total_fee){
                    uni.$u.toast('申请金额不能大于订单总价');
                    return false;
                }
                uni.$u.http.post('refund/refund', {
                    id: _self.id,
                    type:'line',
                    refund_fee:_self.refundItem.refund_fee,
                    remark:_self.refundItem.remark,
                }).then(res => {
                    _self.submitModel = false;
                    _self.refundModel = false;
                    //  #ifdef MP-WEIXIN
                    try {
                        var typeArr = ['refund'];
                        _self.$store.commit('subScribeMsg', typeArr);
                    } catch (error) {
                        console.error('订阅消息请求失败', error);
                    }
                    //  #endif
                    _self.getData();
                }).catch(res => {
                })
            }

        }
    };
</script>
<style lang="scss">
    page{
        padding-bottom: 100rpx;
        .detail-bc {
            padding: 30rpx 30rpx 0  30rpx;
            .d-status{
                .status-info{
                    .status-text{
                        font-size: $font-max;
                    }
                    .time-info{
                        font-size: $font-base;
                        .title{
                            color:$uni-text-color-grey;
                        }
                        .time {
                            @include flex;
                            align-items: center;

                            &__item {
                                color:$-tour-price-color;
                                font-size: $font-base;
                                text-align: center;
                            }
                        }
                    }
                }
                .desc{
                    font-size: $font-base;
                    color:$uni-text-color-grey;
                }
                .price-info{
                    .price-text{
                        font-size: $font-base;
                    }
                    .price{
                        color:$-tour-price-color;
                        font-size: $font-max;
                    }
                }
                .price-more{
                    font-size: $font-base;
                    color: #919ccc;
                }

            }
        }
        .order-item{
            padding-bottom: 150rpx;
            min-height: 800rpx;
            .title{
                font-size: $font-lg;
                color: $uni-text-color;
                font-weight: bold;
            }
            .item-info{
                font-size: $font-lt;
                .info-flex{
                    .info-head{
                        font-size: $font-base;
                        font-weight: bold;
                    }
                    .info-desc{
                        font-size: $font-sm;
                    }
                    .info-price{
                        font-size: $font-base;
                        color: $-tour-price-color;
                    }
                    .info-desc-price{
                        font-size: $font-sm;
                    }
                }
            }
        }
        .order-info{
            margin: 30rpx;
            .head-title{
                font-size: $font-lg;
                .desc{
                    font-size: $font-base;
                    font-weight: normal;
                }
            }
            .line-info{
                .title{
                    width: 90%;
                    font-size: $font-lt;
                }
            }
            .other-info{
                font-size: $font-base;
                .other-title{
                    color:$uni-text-color-grey;
                    width: 22%;
                }
                .other-wd-title{
                    color:$uni-text-color-grey;
                    width: 23%;
                }
                .copy-btn{
                    padding: 5rpx 20rpx;
                    border-radius: 30rpx;
                    border:$-solid-border ;
                    font-size: $font-sm;
                    color:$uni-text-color-grey;
                }
            }
            .other-desc{
                font-size: $font-base;
            }
        }
        .btn-item{
            width: 25%;
            margin-right: 30rpx;
        }
        .wlk-fixed-btn{
            min-height: 118rpx;
        }
        .refund-item{
            padding-bottom: 150rpx;
            min-height: 800rpx;
            .title{
                font-size: $font-lg;
                color: $uni-text-color;
                font-weight: bold;
            }
            .item-info{
                font-size: $font-base;
            }
            .wlk-fixed-btn{
                box-shadow: none;
                left:0
            }
        }

    }

</style>
